import { Form, Input, Switch } from "antd";
import { useEffect, useState } from "react";
import { KeyValueSetter } from "@/pages/lowCodeEditorPlus/components/Setting/selectors/KeyValueSetter";
import { omit } from "lodash-es";

export interface GoToLinkConfig {
  type: "goToLink";
  label: string,
  config:{
    url: string,
    params?: Record<string, any>
    blank?: boolean
  }
}
const initValue={
  url:""
}
interface GoToLinkProps {
  value?: GoToLinkConfig["config"];
  onChange?: (config: GoToLinkConfig) => void;
}
export const goToLinkMsg= {
  type: "goToLink",
  label: "访问链接",
  desc: "跳转至指定链接的页面"
}
export function GoToLink(props: GoToLinkProps) {
  const { value, onChange } = props;
  const [form] = Form.useForm();
  const [config, setConfig] = useState<GoToLinkConfig["config"]>(initValue);
  useEffect(() => {
    if (value) {
      form.setFieldsValue(value);
      setConfig({...config,...value})
    }else{
      form.setFieldsValue(initValue);
    }
  }, [value]);

  function propsChange(changeValues: Partial<GoToLinkConfig["config"]>) {
    setConfig({...config,...changeValues})
    onChange?.({
      ...omit(goToLinkMsg,'desc') as Omit<GoToLinkConfig, "config">,
      config: {...config,...changeValues}
    });
  }

  return (
    <div className="px-4">
      <Form
        form={form}
        onValuesChange={propsChange}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 13 }}
        labelAlign="right"
        labelWrap
        colon={false}
        className="smallText"
      >
        <Form.Item label="链接" name="url">
          <Input.TextArea />
        </Form.Item>
        <Form.Item label="参数" name="params">
          <KeyValueSetter />
        </Form.Item>
        <Form.Item label="新窗口打开" name="blank">
          <Switch defaultChecked/>
        </Form.Item>
      </Form>
    </div>
  );
}
